<template>
	<view class="report">
		<view class="scroll-h">
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index"
				@click="ontabtap">
				<text class="uni-tab-item-title"
					:class="tabIndex == index ? 'uni-tab-item-title-active' : ''">{{tab.name || ''}}</text>
				<text v-show="tabIndex == index" class="uni-tab-item-text"></text>
			</view>
		</view>
		<view class="swiper-fankui">
			<view class="card" >
				<uni-card title="举报信息" :is-shadow="false" :border="false" :margin="'20rpx 20rpx 10rpx'" :spacing="'0 20rpx'" :padding="0">
				   <view class="card-list">
						<view class="list">
							<text v-if="tabIndex" class="list-text">* 酒店名称</text>
							<text v-else class="list-text">* 员工姓名</text>
							<view class="list-box">
								<uni-easyinput :clearable="false" type="text" :inputBorder="false" class="input" v-model="data.object_name" placeholder-class="input-placeholder" placeholder="20个字符以内，支持中英文、数字" ></uni-easyinput>
								<uni-icons class="list-iocn" type="right" color="rgba(0,0,0,0)" size="22r"></uni-icons>
							</view>
						</view>
						<view class="list">
							<text class="list-text">* 举报类型</text>
							<picker @change="typeChange" :value="type" :range="bjTypeCandidates">
								<view class="uni-input" :class="type > 0?'':'uni-input1'">
									{{type > 0?bjTypeCandidates[type]:'请选择类型'}}
									<uni-icons class="list-iocn" type="right" color="rgba(0,0,0,0.5)" size="22r"></uni-icons>
								</view>
							</picker>
						</view>
				   </view>
				</uni-card>
				<uni-card title="举报内容" :extra="lens+'/200'" :is-shadow="false" :border="false" :margin="'10rpx 20rpx'" :spacing="'0 20rpx'" :padding="0">
				    <uni-easyinput type="textarea" :clearable="false" maxlength="200" class="p-input" :inputBorder="false" v-model="data.content" placeholderStyle="font-size: 28rpx" placeholder="请描述您的投诉内容"></uni-easyinput>
				</uni-card>
				<uni-card title="上传凭证" :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'0 40rpx'" :padding="0">
				    <view class="img">
							<uni-grid v-if="fileLists.length" :column="4" :showBorder="false" @change="addImg">
								<uni-grid-item  :key="index" v-for="(item,index) in fileLists">
									<image mode="scaleToFill" :src="item" style="width: 100%;height: 100%;" ></image>
								</uni-grid-item>
							</uni-grid>
							<uni-grid v-else :column="4" :showBorder="false" @change="addImg">
								<uni-grid-item>
								<image class="main-img" mode="aspectFit" :src="imgUrl" ></image>
								</uni-grid-item>
							</uni-grid>
					</view>
				</uni-card>
			</view>
			<view class="pay-but">
				<button class="but" plain @click="getClick">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				imgUrl:`${getApp().globalData.imgScr}jd/xiangji.png`,
				tabIndex: 0, // 顶部切换栏状态 0：举报保洁 1：举报酒店
				tabBars: [{ // 顶部切换栏 数据
					name: '举报员工',
					id: 'jbbj'
				}, {
					name: '举报酒店',
					id: 'jujd'
				}],
				data:{
					type:'', // 举报类型1保洁2酒店 
					cate_id:'', // 举报原因id 
					object_name:'', // 举报对象名称 保洁名称 / 酒店名称  
					content:'', // 举报内容
					image:'', // 举报图片
				},
				fileLists:[], // 图片上传 回显的数据列表
				bjTypeCandidates:[], // 举报类型选项
				type:0, // 举报类型
			};
		},
		onLoad() {
			// === 页面加载完毕后 给长期工渲染数据 ===
			this.getType()
			console.log('举报')
			
		},
		methods: {
			/**
			 * 顶部栏 切换时触发
			 * @param {object} e  获取切换元素的实例
			 */
			ontabtap(e) {
				console.log(e);
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				console.log(index);
				this.tabIndex = index;
				this.fileLists = []
				this.type = 0
				Object.assign(this.data, this.$options.data().data)
				this.getType()
			},
			/**
			 * 举报类型选择器触发
			 * @param {Object} e e.target.value 当前选项的索引
			 */
			typeChange(e) {
				this.type = e.target.value;
				this.data.cate_id = e.target.value
			},
			/**
			 * 提交按钮
			 */
			async getClick() {
				try{
					this.data.type = this.tabIndex?2:1
					let title = ''
					if(this.data.cate_id == '') {
						title = '请选择投诉类型'
					}else if(this.data.object_name == '') {
						title = "请输入投诉名称"
					}else {
						let res = await this.$http.post('/index/Cleanerindex/add_report',this.data)
						console.log('提交数据',res)
						title = "提交成功"
						Object.assign(this.$data,this.$options.data())
					}
					uni.showToast({
						title:title,
						icon:"none"
					})
					// uni.navigateBack({
					//     delta: 1
					// });
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			async getType() {
				let res = ''
				try{
					if(this.tabIndex) {
						res = await this.$http.get('/index/Communal/hotel_report_type')
					}else {
						res = await this.$http.get('/index/Communal/cleaner_report_type')
					}
					this.bjTypeCandidates = res
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
				
			},
			/**
			 * 上传图片
			 * @param {Object} e 点击宫格获取宫格对应的数据
			 */
			addImg(e) {
				let _this = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        // 获取的格式是数组，多选会同时返回，单选只返回一项
						if(chooseImageRes.tempFiles[0].size > 1024 * 1024 * 10) return uni.showToast({
									title: '请选择 10M 以内的图片！',
									icon:"none"
								})
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						_this.fileLists = tempFilePaths
				        // // 若多选，需循环调用uni.uploadFile ，因微信小程序只支持单文件上传
				        uni.uploadFile({
				            // url: 'https://www.zhuoxianrenli.cn/index/hotelindex/uploadImage', //仅为示例，非真实的接口地址
				            url:`${getApp().globalData.url}index/hotelindex/uploadImage`, //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
						header: {
						"Content-Type": "multipart/form-data",
						},
				            success: (uploadFileRes) => {
				                // 根据接口具体返回格式   赋值具体对应url
								_this.data.image = JSON.parse(uploadFileRes.data).file
				            },
							fail:(e) => {
								console.log('错误信息',e)
							}
				        });
				    }
				});
			},
		},
		computed:{
			lens: function() {
				return this.data.content.length
			}
		}
	}
</script>

<style lang="scss">
	.report {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
	.scroll-h {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
	}

	.uni-tab-item {
		position: relative;
		flex: 1;
		display: inline-block;
		text-align: center;
	}

	.uni-tab-item-title {
		color: rgba($color: #000000, $alpha: 0.7);
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		opacity: 0.7;
	}
	.uni-tab-item-text {
		position: absolute;
		bottom: 8rpx;
		left: 50%;
		transform: translateX(-50%);
		height: 4rpx;
		width: 36rpx;
		background: linear-gradient(255deg, #8dc9f1, #d8eefc);
		border-radius: 2rpx;
	}
	.uni-tab-item-title-active {
		color: #000000;
		font-size: 34rpx;
		font-weight: 600;
	}
	.uni-card {
		border-radius: 20rpx;
		.uni-card__header {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #EDEDED;
			font-size: 28rpx;
			color: #000000;
			font-weight: 600;
		}
		.uni-card__content {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.p-input {
			width: 100%;
		}
	}
	.swiper-fankui {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		height: calc(100% - 100rpx);
		.card {
			display: flex;
			flex-direction: column;
			width: 100%;
			flex: 1;
			margin-bottom: 32rpx;
			overflow: auto;
			.uni-easyinput__content-textarea {
				height: 300rpx;
				font-size: 28rpx;
				color: #000000;
				padding: 20rpx 0;
			}
			.card-list {
				flex: 1;
				.list {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					.uni-input {
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
					}
					.uni-input1 {
						font-size: 28rpx;
						color: rgba($color: #000000, $alpha: 0.3);
						font-weight: 500;
					}
					.uni-easyinput__content-input, .uni-combox__input {
						text-align: right;
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						padding: 0!important;
					}
					.list-box {
						flex: 1;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						.input {
							flex: 1;
						}
					}
					.list-text {
						line-height: 48rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						margin-right: 40rpx;
					}
					.list-iocn {
						margin-left: 20rpx;
					} 
				}
			}
			.img {
				width: 100%;
				margin-bottom: 20rpx;
				.uni-grid-item {
					background-color: #F5F7FD;
				}
				.uni-grid-item__box {
					box-sizing: border-box;
					justify-content: center;
					align-items: center;
					padding: 20rpx;
				}
				.main-img {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 10rpx;
				}
			}
			// .card-box {
			// 	display: flex;
			// 	flex-direction: column;
			// 	width: 100%;
			// 	.img {
			// 		width: 100%;
			// 		margin-bottom: 32rpx;
			// 	}
			// 	// .input {
			// 	// 	display: flex;
			// 	// 	align-items: center;
			// 	// 	width: calc(100% - 40rpx);
			// 	// 	border-radius: 20rpx;
			// 	// 	background-color: rgba($color: #E6E6E6, $alpha: 0.2);
			// 	// 	padding: 0 20rpx;
			// 	// 	margin-bottom: 20rpx;
			// 	// 	overflow: hidden;
			// 	// 	.i-text {
			// 	// 		font-size: 24rpx;
			// 	// 		font-weight: 600;
			// 	// 		color: #333333;
			// 	// 	}
			// 	// 	.i-input {
			// 	// 		flex: 1;
			// 	// 	}
			// 	// }
			// 	// .c-a-text {
			// 	// 	width: 100%;
			// 	// 	font-size: 20rpx;
			// 	// 	font-weight: 500;
			// 	// 	color: rgba($color: #000000, $alpha: 0.7);
			// 	// 	margin-bottom: 32rpx;
			// 	// }
			// }
			.file-picker__box-content {
				border: 0!important;
				background-color: #F5F7FD;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.main-img {
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 10rpx;
			}
		}
		.pay-but {
			width: 100%;
			margin-bottom: 20rpx;
			.but {
				color: #FFFFFF;
				background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
				border-radius: 40rpx;
				line-height: 80rpx;
				border: 0;
				margin: 0 20rpx;
			}
		}
	}
}	
</style>
